<template>
    <div class="doctorDetails">
        <c-navigation :title="'医生'" :navigationShow="detailsShow"  @showBack="mainShow">
            <detail-select :detailData="doctorCode" @selectChange="selectChange" :title="'doctor'"></detail-select><c-time @change="timeChangeHandler"/>
        </c-navigation>
        <div class="middleBar">
            <a-tabs default-active-key="1">
                <a-tab-pane key="1" tab="结余趋势">
                    <div id="echarts1" class="echartsDiv"></div>
                </a-tab-pane>
            </a-tabs>
            <ul class="tableUl"><li>时间</li><li v-for="item in barXdata">{{item}}</li><li>总计</li></ul>
            <ul><li>结余</li><li v-for="item in barYdata">{{item}}</li><li>{{allYdata}}</li></ul>
        </div>
        <div class="bottomTable">
            <c-tab :tabList="tabList" :selectKey.sync="selectKey">

                <div class="tableDiv">
                    <c-tab-pane>
                        <a-table  class="custom" :columns="columns1" :data-source="DiseaseListData" :pagination="{total:total1,pageSize:pageSize1}" @change="tableChange1">
                        </a-table>
                    </c-tab-pane>

                    <c-tab-pane>
                        <a-table  class="custom" :columns="columns2" :data-source="compositionListData" :pagination="{total:total2,pageSize:pageSize2}" @change="tableChange2">
                        </a-table>
                    </c-tab-pane>
                </div>
            </c-tab>
        </div>
    </div>
</template>

<script>
    const echarts = require("echarts")
    import {selectDoctorDataDetailsByTimeChart,doctorDataDetailsForDiseaseList,doctorDataFeeCompositionList} from "@/api/doctorsurplus";
    import moment from "moment";
    import CTab from "@/components/cTab.vue"
    import cTabPane from "@/components/cTabPane.vue";
    import detailSelect from "@/components/detailSelect.vue";
    export default {
        name: "doctorDetails",
        props: {
            doctorData: {
                type: Object,
                default: false
            },
            detailsShow: {
                type: Boolean,
                default: false
            },
        },
        components: {
            CTab,
            cTabPane,
            detailSelect
        },
        data() {
            return {
                columns1:[
                    {title: '病组名称', dataIndex: 'diseaseName',},
                    {title: '结余', dataIndex: 'disFee',},
                    {title: '病例数', dataIndex: 'disCount',},
                    {title: '超支主因', dataIndex: 'reason',},
                    {title: '次均费用', dataIndex: 'timeFeeAvg',},
                    {title: '地区DIP均费', dataIndex: 'avemoney',},
                    {title: '病组系数', dataIndex: 'coefficient',},
                    {title: '次均结余', dataIndex: 'disFeeAvg',},
                ],
                columns2:[
                    {title: '医生', dataIndex: 'doctorName',},
                    {title: '结算金额', dataIndex: 'setmoney',},
                    {title: '医疗总费用', dataIndex: 'money',},
                    {title: '结余', dataIndex: 'disFee',},
                    {title: '次均结余', dataIndex: 'disFeeAvg',},
                    {title: '平均住院日', dataIndex: 'daysAvg',},
                    {title: '次均费用', dataIndex: 'timeFeeAvg',},
                    {title: '次均药品费', dataIndex: 'drugFeeAvg',},
                ],
                tabList:[ {name: "病例列表", key: 'a'},
                    {name: "收费构成", key: 'b'}],
                selectKey:"a",
                timeParams: {
                    year: moment().format('YYYY'),
                    month: moment().format('MM')
                },
                doctorCode:'',
                echartsData:null,
                DiseaseListData:null,
                compositionListData:null,
                doctorListData:null,
                barAllData:[],
                barXdata:[],
                barYdata:[],
                allYdata:[],
                total1:1,
                pageNum1:1,
                pageSize1:5,
                total2:1,
                pageNum2:1,
                pageSize2:5,
            }
        },
        created(){
            this.doctorCode=this.doctorData.doctor_code
            console.log(this.doctorCode)
        },
        mounted () {

        },
        methods: {
            selectChange(e){
                this.doctorCode=e
                this.getBar()
                this.getDiseaseList()
                this.getCompositionList()
            },
            timeChangeHandler(e) {
                this.timeParams = e;
                this.getBar()
                this.getDiseaseList()
                this.getCompositionList()
            },
            async getBar() {
                console.log(this.timeParams)
                const params = {...this.timeParams,doctorCode:this.doctorCode,timeInt:-12};
                const res = await selectDoctorDataDetailsByTimeChart(params);
                console.log(res)
                if (res['data']) {
                    console.log(res['data'])
                    this.barAllData=res['data']
                    this.barXdata=this.barAllData.map((item)=>{
                        return item.months
                    })
                    this.barYdata=this.barAllData.map((item)=>{
                        return item.surplus
                    })
                    this.allYdata= this.barYdata.reduce((n,m) => n + m)
                    console.log(this.allYdata)
                    this.echarts1()
                    //this.doctorGroupPieData=res['data']['data']
                }
            },
            async getDiseaseList() {
                const params = {...this.timeParams,doctorCode:this.doctorCode,pageSize:this.pageSize1, pageNum:this.pageNum1};
                const res = await doctorDataDetailsForDiseaseList(params);
                if (res['data']) {
                    console.log(res['data'])
                    this.total1=res['data']['total']
                    this.DiseaseListData=res['data']['list']
                    //this.doctorGroupPieData=res['data']['data']
                }
            },
            async getCompositionList() {
                const params = {...this.timeParams,doctorCode:this.doctorCode,pageSize:this.pageSize2, pageNum:this.pageNum2};
                const res = await doctorDataFeeCompositionList(params);
                if (res['data']) {
                    console.log(res['data'])
                    this.total2=res['data']['total']
                    this.compositionListData=res['data']['list']
                    //this.doctorGroupPieData=res['data']['data']
                }
            },
            mainShow(e){
                this.$emit('noDetails',e)
            },
            tableChange1(e){
                this.pageNum1=e.current
            },
            tableChange2(e){
                this.pageNum2=e.current
            },
            echarts1() {
                var myChart = echarts.init(document.getElementById('echarts1'))
                myChart.setOption({
                    color: ['#5467E6'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '0%',
                        right: '0%',
                        top:'16%',
                        bottom: '10%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: this.barXdata,
                            axisLine: {
                                color: '#BBC1E3',
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name:'元',
                            nameTextStyle: {
                                fontSize: 10,
                                padding: [0, 0, -2, -24]
                            },
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            splitLine: {
                                show: false,
                            }
                        }
                    ],
                    series: [
                        {
                            name: '直接访问',
                            type: 'bar',
                            markArea: { //标记区域
                                data: [
                                    [{
                                        // name: '事件执行时段',
                                        itemStyle: {
                                            color: '#F5F7F9'
                                        }, //颜色设置

                                    }, {

                                    }]
                                ]
                            },
                            markLine: {
                                symbol: 'none',
                                itemStyle: {
                                    normal: {
                                        borderWidth: 1,
                                        lineStyle: {
                                            type: 'solid',
                                            color: '#C2C4D6',
                                            width: 1,
                                        }
                                    },
                                },
                                data: [
                                    {
                                        yAxis: 0
                                    }
                                ]
                            },
                            barWidth: '60%',
                            data: this.barYdata
                        }
                    ]
                })
            },
        }
    }
</script>

<style scoped>
    .middleBar{height:350px;overflow:hidden; margin-top: 20px; margin-bottom: 20px; padding: 20px 30px;box-sizing: border-box;  background: #FFFFFF;box-shadow: 0 4px 8px 0 rgba(14,27,110,0.15), 0 2px 4px 0 rgba(14,24,101,0.20);border-radius: 12px;}
    .echartsDiv{width:100%;height:170px;}

    .tableDiv{ width:100%; height:440px; display: flex;background: #FFFFFF;border-radius: 12px;}
    .middleBar ul{ width:100%; display: flex;background: #FCFCFF; line-height: 32px;}
    .middleBar .tableUl{background: #EBF1FF;}
    .middleBar ul li{flex:1;height: 32px; text-align: center}
    >>>.c-tab .content{border-radius: 12px;}
</style>
